<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Service Detail</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/route-detail.css">
</head>

<body>
<!--引入头部-->
<div id="header"></div>
    <!-- 详情 start -->   
    <div class="wrap">
        <div class="bread_box">
            <a href="/">Home</a>
            <span> &gt;</span>
            <a href="#">Business</a><span> &gt;</span>
            <a href="#">Business course for students in High School</a>
        </div>
        <div class="prosum_box">
            <dl class="prosum_left">
                <dt id="dt">
                    <img alt="" class="big_img" src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">
                </dt>
<!--                <dd id="dd">-->
<!--                    <a class="up_img up_img_disable"></a>-->
<!--                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m40920d0669855e745d97f9ad1df966ebb.jpg">-->
<!--                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m20920d0669855e745d97f9ad1df966ebb.jpg">-->
<!--                    </a>-->
<!--                    <a title="" class="little_img cur_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m49788843d72171643297ccc033d9288ee.jpg">-->
<!--                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m29788843d72171643297ccc033d9288ee.jpg">-->
<!--                    </a>-->
<!--                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4531a8dbceefa2c44e6d0e35627cd2689.jpg">-->
<!--                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2531a8dbceefa2c44e6d0e35627cd2689.jpg">-->
<!--                    </a>-->
<!--                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m46d8cb900e9f6c0a762aca19eae40c00c.jpg">-->
<!--                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m26d8cb900e9f6c0a762aca19eae40c00c.jpg">-->
<!--                    </a>-->
<!--                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m45ea00f6eba562a767b5095bbf8cffe07.jpg" style="display:none;">-->
<!--                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m25ea00f6eba562a767b5095bbf8cffe07.jpg">-->
<!--                    </a>-->
<!--                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4265ec488cd1bc7ce749bc8c9b34b87bc.jpg" style="display:none;">-->
<!--                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2265ec488cd1bc7ce749bc8c9b34b87bc.jpg">-->
<!--                    </a>-->
<!--                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m4e7e964909d7dd1a9f6e5494d4dc0c847.jpg" style="display:none;">-->
<!--                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m2e7e964909d7dd1a9f6e5494d4dc0c847.jpg">-->
<!--                    </a>-->
<!--                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m467db00e1b76718fab0fe8b96e10f4d35.jpg" style="display:none;">-->
<!--                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m267db00e1b76718fab0fe8b96e10f4d35.jpg">-->
<!--                    </a>-->
<!--                    <a title="" class="little_img" data-bigpic="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size4/201703/m487bbbc6e43eba6aa6a36cc1a182f7a20.jpg" style="display:none;">-->
<!--                        <img src="http://www.jinmalvyou.com/Public/uploads/goods_img/img_size2/201703/m287bbbc6e43eba6aa6a36cc1a182f7a20.jpg">-->
<!--                    </a>-->
<!--                    <a class="down_img down_img_disable" style="margin-bottom: 0;"></a>-->
<!--                </dd>-->
            </dl>
            <div class="prosum_right">
               <p class="pros_title" id="rname">【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认</p>
                <p class="hot" id="routeIntroduce">1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                <div class="pros_other">
                    <p>Provider  ：<span id="sname">User1</span></p>
                    <p>PhoneNumber : <span id="consphone">8222222222</span></p>
                    <p>Place ： <span id="address">Manhattan, NY 10036, United States</span></p>
                </div>
<!--                <div class="pros_price">-->
<!--                    <p class="price"><strong id="price">¥2699.00</strong><span>起</span></p>-->
<!--                    <p class="collect">-->
<!--                        <a class="btn" id="favorite" onclick="addFavorite();"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>-->

<!--                        &lt;!&ndash;<a  class="btn already" disabled="disabled"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>&ndash;&gt;-->
<!--                        <span id="favoriteCount">已收藏100次</span>-->
<!--                    </p>-->
<!--                </div>        -->
            </div>
        </div>
        <div class="you_need_konw">
            <span>Description</span>
            <div class="notice">
                <p>The teacher is well qualified. <br>
            </div>           
        </div>
    </div>
    <!-- 详情 end -->

    <!--引入头部-->
    <div id="footer"></div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
    <script src="js/getParameter.js"></script>
    <script>
    $(document).ready(function() {

        //自动播放
        goImg();
        var timer = setInterval("auto_play()", 5000);
    });
    function goImg(){
        //焦点图效果
        //点击图片切换图片
        $('.little_img').on('mousemove', function() {
            $('.little_img').removeClass('cur_img');
            var big_pic = $(this).data('bigpic');
            $('.big_img').attr('src', big_pic);
            $(this).addClass('cur_img');
        });
        //上下切换
        var picindex = 0;
        var nextindex = 4;
        $('.down_img').on('click',function(){
            var num = $('.little_img').length;
            if((nextindex + 1) <= num){
                $('.little_img:eq('+picindex+')').hide();
                $('.little_img:eq('+nextindex+')').show();
                picindex = picindex + 1;
                nextindex = nextindex + 1;
            }
        });
        $('.up_img').on('click',function(){
            var num = $('.little_img').length;
            if(picindex > 0){
                $('.little_img:eq('+(nextindex-1)+')').hide();
                $('.little_img:eq('+(picindex-1)+')').show();
                picindex = picindex - 1;
                nextindex = nextindex - 1;
            }
        });
    }

    //自动轮播方法
    function auto_play() {
        var cur_index = $('.prosum_left dd').find('a.cur_img').index();
        cur_index = cur_index - 1;
        var num = $('.little_img').length;
        var max_index = 3;
        if ((num - 1) < 3) {
            max_index = num - 1;
        }
        if (cur_index < max_index) {
            var next_index = cur_index + 1;
            var big_pic = $('.little_img:eq(' + next_index + ')').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(' + next_index + ')').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        } else {
            var big_pic = $('.little_img:eq(0)').data('bigpic');
            $('.little_img').removeClass('cur_img');
            $('.little_img:eq(0)').addClass('cur_img');
            $('.big_img').attr('src', big_pic);
        }
    }

    // 页面加载完成后做的第一件事，就是来写一个入口函数
    $(function(){
        // 1.获取rid
        var rid = getParameter("rid");
        // 2.发送请求 route/findOne
        $.get("route/findOne",{rid:rid},function(route){
            //3.解析数据填充html
            $("#rname").html(route.rname);
            $("#routeIntroduce").html(route.routeIntroduce);
            $("#sname").html(route.seller.sname);
            $("#consphone").html(route.seller.consphone);
            $("#address").html(route.seller.address);
            $("#price").html("¥"+route.price);
            // 设置收藏次数
            $("#favoriteCount").html("已收藏"+route.count+"次");

            //图片展示
            var ddstr = '<a class="up_img up_img_disable"></a>';
            for(var i = 0; i< route.routeImgList.length; i++){
                var astr;
                if(i >= 4){
                    // 如果大于4，就显示四张图片
                    astr = '<a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'" style="display:none;">'+
                            '        <img src="'+route.routeImgList[i].smallPic+'">'+
                            '   </a>';
                }else{
                    astr = '<a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'">'+
                            '        <img src="'+route.routeImgList[i].smallPic+'">'+
                            '   </a>';
                }

                ddstr += astr;
            }
            ddstr += '<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>';
            var dtstr = '<img alt="" class="big_img" src="'+route.routeImgList[0].bigPic+'">';
            $("#dt").html(dtstr);
            $("#dd").html(ddstr);

            // 图片展示和切换的代码调用
            goImg();
        });
    });

    $(function(){
        // 发送请求，判断用户是否收藏过该线路
        var rid = getParameter("rid");
        $.get("route/isFavorite",{rid:rid},function(flag){
            if(flag){
                // 用户已经收藏过
                // <a  class="btn already" disabled="disabled">
                // 设置收藏按钮的样式
                $("#favorite").addClass("already");
                $("#favorite").attr("disabled","disabled");

                // 删除按钮的点击事件
                $("#favorite").removeAttr("onclick");
            }else{
                // 用户没有收藏
            }
        });
    });

    // 点击收藏按钮去触发的方法
    function addFavorite(){
        var rid = getParameter("rid");
        // 1.判断用户是否登录
        $.get("user/findOne",{},function(user){
            if(user){
                // 用户登录
                //添加功能
                $.get("route/addFavorite",{rid:rid},function(){

                    // 代码刷新页面
                    location.reload();
                });

            }else{
                // 用户没有登录
                alert("您尚未登录，请登录");
                location.href="http://localhost/travel/login.html";
            }
        })
    }
    </script>

</body>

</html>